<template>
  <div class="Dh_box">
    <el-dialog :title="title" :visible.sync="showDialog" :before-close="dialogFormVisible" width="95%" style="margin-left:10%; margin-top:4%;">
      <el-form :model="form" ref="form" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="线路名称" :label-width="formLabelWidth" prop="lineId">
              <el-select v-model="form.lineId" placeholder="请选择" @change="getSection" :disabled="prohibit">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="班次号" :label-width="formLabelWidth" prop="busNum">
              <el-input size="small" v-model="form.busNum" :disabled="prohibit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="始发站" :label-width="formLabelWidth" prop="startStation">
              <el-select v-model="form.startStation" placeholder="请选择" :disabled="forbid">
                <el-option v-for="item in stationList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="终点站" :label-width="formLabelWidth" prop="endStation">
              <el-select v-model="form.endStation" placeholder="请选择" :disabled="forbid">
                <el-option v-for="item in stationList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="运营类别" :label-width="formLabelWidth" prop="workType">
              <el-select v-model="form.workType" placeholder="请选择">
                <el-option label="单营" value="1"></el-option>
                <el-option label="共营" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="运营方式" :label-width="formLabelWidth" prop="workWay">
              <el-select v-model="form.workWay" placeholder="请选择">
                <el-option label="直达" value="1"></el-option>
                <el-option label="普通" value="2"></el-option>
                <el-option label="公交" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="车次类型" :label-width="formLabelWidth" prop="busType">
              <el-select v-model="form.busType" placeholder="请选择">
                <el-option label="固定" value="1"></el-option>
                <el-option label="流水" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="发车时间" :label-width="formLabelWidth" prop="startTime">
              <el-time-picker v-model="form.startTime" placeholder="任意时间点" format="HH:mm" value-format="HH:mm"> </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="检票口" :label-width="formLabelWidth" prop="checkGate">
              <el-input size="small" v-model="form.checkGate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="候车厅" :label-width="formLabelWidth" prop="waitingRoom">
              <el-input size="small" v-model="form.waitingRoom"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="发车位" :label-width="formLabelWidth" prop="parkingSpace">
              <el-input size="small" v-model="form.parkingSpace"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="运行时间" :label-width="formLabelWidth" prop="runTime">
              <el-input size="small" v-model="form.runTime" :disabled="forbid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="运行周期" :label-width="formLabelWidth" prop="runCycle">
              <el-input size="small" v-model="form.runCycle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="开始序号" :label-width="formLabelWidth" prop="runStartSerial">
              <el-input size="small" v-model="form.runStartSerial"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="滚动车次循环时间" :label-width="formLabelWidth" prop="scrollbusCheckTime">
              <el-input size="small" v-model="form.scrollbusCheckTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="是否报道后售票" :label-width="formLabelWidth" prop="isSaleaterReport">
              <el-select v-model="form.isSaleaterReport" placeholder="请选择">
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="是否实名制" :label-width="formLabelWidth" prop="isRealName">
              <el-select v-model="form.isRealName" placeholder="请选择">
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="座位数" :label-width="formLabelWidth" prop="totalSeat">
              <el-input size="small" v-model="form.totalSeat"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="互联网张数" :label-width="formLabelWidth" prop="interlinkQuantity">
              <el-input size="small" v-model="form.interlinkQuantity"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="开停状态" :label-width="formLabelWidth" prop="status">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option label="开" :value="true"></el-option>
                <el-option label="停" :value="false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="区域类型" :label-width="formLabelWidth" prop="districtType">
              <el-select v-model="form.districtType" placeholder="请选择" :disabled="forbid">
                <el-option label="县内班线" value="0"></el-option>
                <el-option label="县际班线" value="1"></el-option>
                <el-option label="市际班线" value="2"></el-option>
                <el-option label="省际班线" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="开始日期" :label-width="formLabelWidth" prop="startDate">
              <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="结束日期" :label-width="formLabelWidth" prop="endDate">
              <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="small" class="Dh_item" label="备注" :label-width="formLabelWidth">
              <el-input size="small" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="updates('form')" class="update" v-if="renewal">更新</el-button>
        <el-button type="primary" @click="updates('form')" class="update" v-if="newly">新增</el-button>
        <el-button type="warning" @click="dialogFormVisible" class="close">关闭 </el-button>
        <el-button type="warning">车次配载 </el-button>
        <el-button type="warning" @click="getVehicle">车次车辆 </el-button>
        <el-button type="warning" @click="reserved">座位预留 </el-button>
        <el-button type="warning" @click="fares">车次票价 </el-button>
      </div>
    </el-dialog>
    <vehicle-Number v-if="vehicle" :vehicleShow="vehicle" :vehicleId="vehicleId" @hide="isHide" />
    <ticket-Rates v-if="ticket" :startStation="busData.stationId" :ticketShow="ticket" :ticketDetails="ticketDetails" :ticketBusNum="ticketBusNum" @hide="isTicket" />
  </div>
</template>
<script>
const api = $api.dispatch.bus_Info
const routeApi = $api.dispatch.route_Info

import vehicleNumber from '../components/vehicleNumber'
import ticketRates from '../components/ticketRates'

export default {
  components: { vehicleNumber, ticketRates },
  props: ['show', 'isAdd', 'busData'],
  data() {
    return {
      title: '',
      renewal: false, //更新按钮
      newly: false, //新增按钮
      options: [],
      startStation: '', //所属车站
      id: '', //修改班次信息的id
      form: {
        lineId: '',
        busNum: '',
        startStation: '',
        endStation: '',
        workType: '',
        workWay: '',
        busType: '',
        startTime: '',
        checkGate: '',
        waitingRoom: '',
        parkingSpace: '',
        runTime: '',
        runCycle: '',
        runStartSerial: '',
        scrollbusCheckTime: '',
        isSaleaterReport: false,
        isRealName: true,
        totalSeat: '',
        interlinkQuantity: '',
        status: true,
        districtType: '',
        startDate: '',
        endDate: '',
      },
      forbid: false,
      prohibit: false,
      rules: {
        lineId: { required: true, message: '请选择线路编码', trigger: 'change' },
        busNum: { required: true, message: '请输入班次号', trigger: 'blur' },
        startStation: { required: true, message: '请选择始发站', trigger: 'change' },
        endStation: { required: true, message: '请选择目的站', trigger: 'change' },
        workType: { required: true, message: '请选择运营类别', trigger: 'change' },
        workWay: { required: true, message: '请选择运营方式', trigger: 'change' },
        busType: { required: true, message: '请选择车次类型', trigger: 'change' },
        startTime: { required: true, message: '请选择发车时间', trigger: 'change' },
        checkGate: { required: true, message: '请输入检票口', trigger: 'blur' },
        waitingRoom: { required: true, message: '请输入候车厅', trigger: 'blur' },
        parkingSpace: { required: true, message: '请输入发车位', trigger: 'blur' },
        runTime: { required: true, message: '请输入运行时间', trigger: 'blur' },
        runCycle: { required: true, message: '请输入运行周期', trigger: 'blur' },
        runStartSerial: { required: true, message: '请输入开始序号', trigger: 'blur' },
        scrollbusCheckTime: { required: true, message: '请输入滚动循环时间', trigger: 'blur' },
        isSaleaterReport: { required: true, message: '请选择是否报道后售票', trigger: 'change' },
        isRealName: { required: true, message: '请选择是否实名', trigger: 'change' },
        totalSeat: { required: true, message: '请输入座位数', trigger: 'blur' },
        interlinkQuantity: { required: true, message: '请输入互联网张数', trigger: 'blur' },
        status: { required: true, message: '请选择开停状态', trigger: 'change' },
        districtType: { required: true, message: '请选择区域类型', trigger: 'change' },
        startDate: { required: true, message: '请选择开始时间', trigger: 'change' },
        endDate: { required: true, message: '请选择结束时间', trigger: 'change' },
      },
      increase: {},
      formLabelWidth: '140px',
      showDialog: this.show,
      vehicle: false, //车辆车次组件
      vehicleId: '',
      ticket: false, //车次票价
      ticketDetails: '',
      ticketBusNum: '',
      stationList: [],
    }
  },
  mounted() {
    if (this.isAdd === false) {
      this.forbid = true
      this.title = '新增班次信息'
      this.newly = true
    } else {
      this.getLine()
      this.title = '修改班次信息'
      this.form = this.busData
      this.form.workType = this.form.workType.toString()
      this.form.workWay = this.form.workWay.toString()
      this.form.busType = this.form.busType.toString()
      this.form.districtType = this.form.districtType.toString()
      this.form.startStation = this.busData.lineDetailInfo.startStation
      this.form.endStation = this.busData.lineDetailInfo.endStation
      this.renewal = true
      this.prohibit = true
      this.forbid = true
    }
    this.lineList() //获取线路编码
    // this.targetQuery()
    this.getStation()
  },
  methods: {
    // 隔行变色
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    dialogFormVisible() {
      this.showDialog = false
      this.$emit('hide')
    },
    // 获取线路编码
    lineList() {
      api.routeQuery().then((res) => {
        var arr = res.rows.map((item) => {
          return { value: item.id, label: item.route_name }
        })
        this.options = arr
      })
    },
    // 起始站列表
    getStation() {
      routeApi.stationQuery().then((res) => {
        this.stationList = res.rows.map((i) => {
          return { value: i.id, label: i.station_name }
        })
      })
    },
    // 获取线路明显
    getSection() {
      api.querylinedetailinfo({ lineId: this.form.lineId, busId: this.form.busNum }).then((res) => {
        this.startStation = res.stationCode
        this.form.startStation = res.startStation
        this.form.endStation = res.endStation
        this.form.runTime = res.runTime
        this.form.districtType = res.districtType
      })
    },
    getDetaios(arr) {
      for (var i in arr) {
        if (arr[i] == null) {
          return true
        }
      }
      return false
    },
    //获取编辑的线路
    getLine() {
      api
        .querylinedetailinfo({
          lineId: this.busData.lineId,
          busId: this.form.busNum,
        })
        .then((res) => {
          this.id = res.id
          this.form.run_time = res.runTime
          this.form.district_type = res.lineDistrictType
        })
    },
    // 新增/编辑
    updates(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.increase = {
            bus_id: this.form.busNum,
            route_id: this.form.lineId,
            work_type: this.form.workType,
            work_way: this.form.workWay,
            district_type: this.form.districtType,
            bus_type: this.form.busType,
            start_time: this.form.startTime,
            check_gate: this.form.checkGate,
            waitting_room: this.form.waitingRoom,
            parking_space: this.form.parkingSpace,
            run_time: this.form.runTime,
            run_cycle: this.form.runCycle,
            run_start_serial: this.form.runStartSerial,
            scrollbus_check_time: this.form.scrollbusCheckTime,
            is_saleafterreport: this.form.isSaleaterReport,
            is_realname: this.form.isRealName,
            total_seat: this.form.totalSeat,
            interlink_quantity: this.form.interlinkQuantity,
            internet_quantity: 0,
            status: this.form.status,
            start_date: this.form.startDate,
            end_date: this.form.endDate,
            remark: this.form.remark,
          }
          if (this.isAdd == true) {
            var compile = this.increase
            compile['id'] = this.busData.id
            compile['station_id'] = this.busData.stationId
            api.busUpdate(compile).then((res) => {
              this.$emit('hide', true)
              this.$emit('hide')
              this.$message({
                message: '编辑成功',
                type: 'success',
              })
            })
          } else {
            this.increase['station_id'] = this.startStation
            api.busAdd(this.increase).then((res) => {
              this.$emit('hide', true)
              this.$emit('hide')
              this.$message({
                message: '添加成功',
                type: 'success',
              })
            })
          }
        } else {
          this.$message({
            message: '请把内容填写完整',
            type: 'warning',
          })
          return false
        }
      })
    },
    // 车次车辆
    getVehicle() {
      if (this.busData.busNum != undefined || this.form.busNum != undefined) {
        this.vehicle = true
        this.vehicleId = this.form.busNum
      } else {
        this.$message({
          message: '请输入班次号进行查询',
          type: 'warning',
        })
      }
    },
    isHide() {
      this.vehicle = false
    },
    isTicket() {
      this.ticket = false
    },
    //座位预留
    reserved() {
      api.reserveSeatQuery({ bus_id: this.form.busNum })
    },
    // 车次票价
    fares() {
      // 新增
      if (this.isAdd == false) {
        if (this.form.lineId == '' || this.form.busNum == '') {
          this.$message({
            message: '请输入线路编码和班次号',
            type: 'warning',
          })
        } else {
          api.querylinedetailinfo({ lineId: this.form.lineId, busId: this.form.busNum }).then((res) => {
            this.ticketDetails = res
            this.ticket = true
          })
          // this.ticket = true
          this.ticketBusNum = this.form.busNum
        }
      }
      // 编辑
      else {
        this.ticketBusNum = this.busData.busNum
        this.ticketDetails = this.busData.lineDetailInfo
        this.ticket = true
      }
    },
  },
}
</script>
<style>
.el-table .warning-row {
  background: #f1f1f1;
}
.el-table .success-row {
  background: #f5deb3;
}
.Dh_box .el-dialog__body {
  padding: 0 20px;
}
.Dh_item .el-form-item__label {
  text-align: center;
  background: #dedede;
  border-radius: 4px 0 0 4px;
}
.Dh_item .el-input.is-disabled .el-input__inner {
  background-color: #dedede;
}
.Dh_item .el-input__inner {
  border-radius: 0 4px 0;
  border: 1px solid #dedede;
}
.btn {
  text-align: center;
  padding: 30px;
}
.update:hover {
  background-color: #3073a9;
}
.close {
  color: #fff;
  background-color: sandybrown;
}
.close:hover {
  color: #fff;
  background-color: #eea236;
}
.table .el-table th {
  background-color: #3073a9;
  color: #fff;
  font-weight: 500;
}
.Dh_frame .el-input__inner {
  padding: 0 2px !important;
  border: 1px solid #000;
  /* border: none; */
}
</style>
